<template>
  <el-container style="width: 100%">
    <!--网页头-->
    <el-header>
      <el-row :gutter="24" class="home-row">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#0000002b"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-col :span="4">
            <el-menu-item class="home-el-menu-item" index="1" @click="main">
              <img src="@/assets/s611e2933ab432.png" style="margin-left:35px;height: 40px;width: 30px"/>
            </el-menu-item>
          </el-col>
          <el-col :span="8">
            <el-menu-item class="home-el-menu-item" index="1" @click="exhibit">展览</el-menu-item>
          </el-col>
          <el-col :span="8">
            <el-menu-item class="home-el-menu-item" index="1" @click="notice">公告 · 通知</el-menu-item>
          </el-col>
          <el-col :span="4">
            <el-menu-item class="home-el-menu-item" index="1">
              <el-button class="blue-button" v-if="this.currentUser.userId === undefined" style="margin-top: 1px"
                         type="primary" @click="login" round>登录
              </el-button>
              <div class="block">
                <el-avatar style="cursor: pointer"
                           @click.native="userCenter" v-if="this.currentUser.userId !== undefined" shape="square"
                           :size="35" :src="squareUrl"></el-avatar>
                <div @click="userCenter" style="margin-left: 20px; font-size: 1.5em"
                     v-if="this.currentUser.userId !== undefined">{{ this.currentUser.userAccount }}
                </div>
              </div>
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-row>
    </el-header>
    <!--网页主体-->
    <el-main>
      <router-view></router-view>
    </el-main>

    <!--网页尾-->
    <el-footer>
      <div>
        <div style="margin-top: 1.7%;margin-left:50px;width: 75%;float: left">
          <div class="link">友情链接：</div>
          <div class="link">北京博物馆</div>
          <div class="link">南京博物馆</div>
          <div class="link">河南博物馆</div>
          <div class="link">武汉博物馆</div>
          <div class="link">上海博物馆</div>
          <div class="link">深圳博物馆</div>
        </div>
        <div style="float:left;height: 65px">
          <el-image style="height: 100%;margin-top: 24px;margin-left: -110px" :src="url"></el-image>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      activeIndex: '1',
      currentUser: [],
      url: require('D:\\CodeProject\\Vue\\vue-museum\\src\\assets\\flogo.png')
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    login() {
      this.$router.push('/login')
    },
    userCenter() {
      this.$router.push('/center')
    },
    notice() {
      this.$router.push('/notice')
    },
    exhibit() {
      this.$router.push('/exhibit')
    },
    main() {
      this.$router.push('/')
    }
  },
  mounted() {
    if (sessionStorage.getItem("currentUser") != null) {
      this.currentUser = JSON.parse(sessionStorage.getItem("currentUser"))
    }
  }
}
</script>

<style>
.blue-button {
  background-color: #70472d !important;
  border: none !important;
  color: #e3ca6b !important;
}

.el-footer {
  height: 105px !important;
}

.el-header {
  box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !important;
}

.el-col {
  padding: 0 !important;
}

.home-el-menu-item {
  height: 60px !important;
  padding: 0 !important;
}

.home-row {
  height: 60px !important;
  width: 1525px !important;
}

.block {
  height: 56px;
  display: flex;
  justify-content: center; /*垂直居中*/
  align-items: center; /*水平居中*/
}

.link {
  display: inline-block;
  margin-left: 3%;
  color: #fff;
}
</style>
